<template>
  <div>
    <van-field
      readonly
      :required="required"
      clickable
      :label="label"
      :name="name"
      v-model="value"
      :input-align="iptAlign"
      :placeholder="placeholderText"
      @click="showPicker = true"
      :rules="[{ required: true }]"
    />
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="orgTypeList"
        value-key="name"
        @cancel="showPicker = false"
        @confirm="orgTypeSure"
      />
    </van-popup>
  </div>
</template>

<script>
// 选择器组件-数据来源实时接口调用
import { get_dict_options } from "@/api/user.js";
import { Picker } from 'vant';
export default {
  name: "commonSelect",
  components:{
    'van-picker':Picker
  },
  props: {
    // 字典code
    code: {
      require: true,
      default: "JGLX",
    },
    name: {
      type: String,
      require: false,
    },
    // 标题
    label: {
      require: true,
    },
    // 是否必填
    required: {
      require: false,
      default: false,
    },
    // 回显值
    value: {
      require: false,
    },
    // 输入框位置
    iptAlign: {
      require: false,
      default: "right",
    },
    // 占位文字
    placeholderText: {
      require: false,
      default: "请选择",
    },
  },
  components: {},
  watch: {
    // value() {
    //   if (this.value) {
    //     let result = this.orgTypeList.filter((item) => {
    //       return item.code === this.value;
    //     });
    //     this.value = result[0].name;
    //   }
    // },
  },
  data() {
    return {
      showPicker: false,
      orgTypeList: [],
    };
  },
  created() {
    this.getDictOptions();
  },
  methods: {
    orgTypeSure(value, index) {
      this.showPicker = false;
      this.$emit("update:value", value.name);
      this.$emit("sureSelect", value);
    },
    getDictOptions() {
      get_dict_options({
        parentCodes: this.code,
      }).then((res) => {
        if (res.succeed) {
          this.orgTypeList = res.data[this.code];
          if (this.value) {
            let result = this.orgTypeList.filter((item) => {
              return item.code === this.value;
            });
            this.value = result[0].name;
          }
          // this.$emit('getOptions',res.data)
        } else {
        }
      });
    },
  },
};
</script>
<style scoped>
</style>